<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <!-- Summernote CSS  -->
        <link rel="stylesheet" type="text/css" href="${rootPath}/js/plugins/nestable/nestable.css">
        <%@include file="common/head.jspf" %>
    </head>

    <body class="messages-page department-page sb-l-o sb-r-c" data-menu="" data-list="#li_department">

        <!-- 主体内容开始 -->
        <div id="main">

            <!--侧边导航栏-->
            <%@include file="common/sidebar.jspf" %>

            <!-- Start: Content-Wrapper -->
            <section id="content_wrapper">

                <!-- 顶部导航 -->
                <header id="topbar">
                    <div class="topbar-left">
                        <ol class="breadcrumb">
                            <li class="crumb-active">
                                <span>软擎科技</span>
                            </li>
                            <li class="crumb-icon">
                                <a href="dashboard"><span class="glyphicon glyphicon-home"></span></a>
                            </li>
                            <!-- 当前页 -->
                            <li class="crumb-trail">部门管理</li>
                        </ol>
                    </div>
                    <div class="topbar-right">
                        <!-- 登录信息 -->
                        <%@include file="common/session.jspf" %>
                    </div>
                </header>
                <!-- 顶部导航结束 -->

                <!-- 页面内容开始 -->
                <section id="content" class="table-layout">


                    <div class="tray tray-center pn va-t bg-light">

                        <!--文章列表-->
                        <div id="departments">
                            <div class="pv10 pl15 bg-white pr10 br-b">
                                <div class="row table-layout">
                                    <div class="col-xs-12 pn">
                                        <div class="btn-group pull-left hidden">
                                            <button type="button" class="btn btn-default light"><i class="fa fa-refresh"></i></button>
                                        </div>
                                        <div class="pull-left lh40 fs15 mn"><i class="fa fa-sitemap mr5 text-primary"></i>部门管理</div>
                                        <div class="pull-right prn">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default light" id="add_department"><i class="fa fa-plus mr5"></i>添加部门</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- message listings table -->
                            <table id="departmentTable" class="table admin-form theme-warning table-text-center">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>部门名称</th>
                                        <th>部门编号</th>
                                        <th>上级部门</th>
                                        <th>负责人</th>
                                        <th>联系人</th>
                                        <th>员工总数</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="departmentContainer">
                                    <tr>
                                        <td colspan="7" class="text-center text-muted-light pv50 fs15" id="departmentTd">
                                            <i class="mr10 fa fa-spin fa-spinner"></i>加载中 ...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>


                        <div id="newDepartment" class="p10 shide">
                            <h1 class="text-center text-muted-lighter mb20" id="addDepartmentH1"><i class="fa fa-plus-square mr5"></i>添加部门</h1>
                            <h1 class="text-center text-muted-lighter mb20 shide" id="editDepartmentH1"><i class="fa fa-pencil-square-o mr5"></i>编辑部门</h1>
                            <form class="form-horizontal admin-form mb10 mt20" role="form" id="departmentForm">
                                <div class="form-group mbn">
                                    <input type="hidden" class="form-control pull-right" name="id" id="id" value="">
                                    <label class="col-md-3 col-lg-3 control-label mb10" for="name"><span class="text-danger mr5">*</span>部门名称</label>
                                    <div class="col-md-8 col-lg-6 mb10">
                                        <input type="text" class="form-control pull-right" name="name" id="name">
                                    </div>
                                </div>
                                <div class="form-group mbn">
                                    <label class="col-md-3 col-lg-3 control-label mb10" for="code"><span class="text-danger mr5">*</span>部门编号</label>
                                    <div class="col-md-8 col-lg-6 mb10">
                                        <input type="text" class="form-control pull-right" name="code" id="code">
                                    </div>
                                </div>
                                <div class="form-group mbn">
                                    <label class="col-md-3 col-lg-3 control-label mb10" for="parentId">上级部门</label>
                                    <div class="col-md-8 col-lg-6 mb10">
                                        <label class="field select">
                                            <select id="departmentSelect" name="parentId">
                                                <option value="">无</option>
                                            </select>
                                            <i class="arrow"></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group mbn">
                                    <label class="col-md-3 col-lg-3 control-label mb10" for="officeHead">负责人</label>
                                    <div class="col-md-8 col-lg-6 mb10">
                                        <label class="field select">
                                            <select id="officeHeadSelect" name="officeHead"></select>
                                            <i class="arrow"></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group mbn">
                                    <label class="col-md-3 col-lg-3 control-label mb10" for="contactPerson">联系人</label>
                                    <div class="col-md-8 col-lg-6 mb10">
                                        <label class="field select">
                                            <select id="contactPersonSelect" name="contactPerson"></select>
                                            <i class="arrow"></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group mbn">
                                    <label class="col-md-3 col-lg-3 control-label" for="description">部门描述</label>
                                    <div class="col-md-8 col-lg-6">
                                        <textarea class="form-control" 
                                                  id="description" 
                                                  name="description" 
                                                  rows="4" 
                                                  placeholder=""></textarea>
                                    </div>
                                </div>
                            </form>
                            <div class="mt15 row">
                                <div class="col-md-3"></div>
                                <div class="col-lg-4 col-xs-8">
                                    <button type="button" class="btn btn-primary btn-block" id="save_department"><i class="fa fa-check mr10"></i>保存部门</button>
                                </div>
                                <div class="col-lg-2 col-xs-4 ptn">
                                    <button type="button" class="btn btn-default light btn-block" id="cancel_save">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <aside class="tray tray-right pn va-t tray250" data-tray-height="match">
                        <div class="p20">
                            <h4 class="mt5 mb20"> 部门组织结构图 - <span class="fs14 fw400 text-muted">Departments</span></h4>
                            <ul class="list-unstyled list-spacing-10 mb10 pl5">
                                <li>
                                    <i class="fa fa-exclamation-circle text-warning fa-lg pr10"></i>
                                    点击可查看部门员工
                                </li>
                            </ul>
                        </div>

                        <hr class="mn br-light">

                        <div class="p10">
                            <!-- menu links -->
                            <!--<h4 class="ph10 mt10 mb5"> 栏目列表 </h4>-->
                            <div class="dd mb35" id="departmentTree">
                                <ol class="dd-list" id="rootOl"></ol>
                            </div>
                        </div>
                    </aside>
                </section>
                <!-- 页面内容结束 -->
            </section>
        </div>
        <!-- 主体内容结束 -->
        
        <div id="addEmployeePanel" class="popup-basic admin-form mfp-with-anim mfp-hide">
            <div class="panel">
                <div class="panel-heading text-center">
                    <span class="panel-title fs16">添加部门员工</span>
                </div>
                <div class="panel-body p25">
                    <div class="form-horizontal no-selection mb30" id="employeeDiv"></div>
                    <button class="btn btn-primary btn-block" id="saveMemberBtn"><i class="fa fa-check mr10"></i>保存</button>
                </div>
            </div>
            <!-- end: .panel -->
        </div>
        
        <script type="text/x-tmpl-mustache" id="departmentTemplate">
            {{#result}}
            <tr class="message-read">
                <td>{{name}}</td>
                <td>{{code}}</td>
                <td>{{parent}}</td>
                <td><a href="employee/profile/{{officeHead}}" target="_blank">{{officeHeadName}}</a></td>
                <td><a href="employee/profile/{{contactPerson}}" target="_blank">{{contactPersonName}}</a></td>
                <td>{{employeeCount}}</td>
                <td class="text-right">
                    <div class="btn-group mr10">
                        <button class="btn btn-default light btn-sm text-muted edit-department-link" data-id="{{id}}"><i class="fa fa-pencil"></i></button>
                        <button class="btn btn-default light btn-sm text-muted delete-department-link" data-id="{{id}}"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
            {{/result}}
        </script>
        
        <script type="text/x-tmpl-mustache" id="loadingDepartment">
            <tr>
            <td colspan="6" class="text-center text-muted-light pv50 fs15" id="itemTd">
            <i class="mr10 fa fa-spin fa-spinner"></i>加载中 ...
            </td>
            </tr>
        </script>
        
        <script type="text/x-tmpl-mustache" id="departmentBtns">
            <div class="btn-group mr10">
                <button class="btn btn-default light btn-sm text-muted edit-department-link" data-id="{{id}}"><i class="fa fa-pencil"></i></button>
                <button class="btn btn-default light btn-sm text-muted add-member-link" data-id="{{id}}"><span class="glyphicons glyphicons-user_add"></span></button>
                <button class="btn btn-default light btn-sm text-muted delete-department-link" data-id="{{id}}"><i class="fa fa-trash"></i></button>
            </div>
        </script>
        
        <script type="text/x-tmpl-mustache" id="memberTemplate">
           {{#result}}
               <div class="checkbox-custom checkbox-primary mb15 member_checkbox_div" id="m-{{id}}">
                   <input type="checkbox" value="{{id}}" id="{{id}}" class="member_checkbox">
                   <label for="{{id}}">{{loginName}} - {{name}}</label>
               </div>
           {{/result}}
        </script>
        
        <script type="text/x-tmpl-mustache" id="departmentEmployeeTemplate">
            <table class="table table-text-center">
                <thead class="hidden">
                    <tr>
                        <th>员工登录名</th>
                        <th>员工姓名</th>
                        <th>员工手机号</th>
                        <th>账号状态</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {{#members}}
                    <tr class="message-read">
                        <td><a href="employee/index/{{id}}" target="_blank">{{loginName}}</a></td>
                        <td>{{name}}</td>
                        <td>{{mobile}}</td>
                        <td>{{status}}</td>
                        <td>
                            <div class="btn-group mr10">
                                <button class="btn btn-default btn-xs light btn-sm text-muted delete-member-link" data-id="{{id}}" data-did="{{did}}"><i class="fa fa-trash"></i></button>
                            </div>
                        </td>
                    </tr>
                    {{/members}}
                </tbody>
            </table>
        </script>

        <!-- 公共函数 -->
        <%@include file="common/scripts.jspf" %>
        <!-- Summernote JS -->
        <!-- Plugin JS -->
        <script type="text/javascript" src="${rootPath}/js/plugins/nestable/jquery.nestable.js"></script>
        <script type="text/javascript" src="${rootPath}/js/pages/department.js"></script>
    </body>
</html>
